<template>
    <div>
        <splitpanes class="default-theme" horizontal style="height: 400px">
            <pane min-size="20" max-size="70">
                <span>1</span>
            </pane>
            <pane>
                <span>2</span>
            </pane>
            <pane max-size="70">
                <span>3</span>
            </pane>
        </splitpanes>
    </div>
</template>

<script>
    import {Splitpanes, Pane} from 'splitpanes'
    import 'splitpanes/dist/splitpanes.css'

    export default {
        name: "split",
        components: {Splitpanes, Pane},
    }
</script>

<style scoped>
    .splitpanes__pane {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Helvetica, Arial, sans-serif;
        color: rgba(255, 255, 255, 0.6);
        font-size: 5em;
    }
</style>